<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wangEditor example</title>
    
    <style>
    </style>
</head>

<body>
    <p>
        wangEditor 自定义菜单
    </p>
    <div id="div1"></div>
    <div id="div2"></div>
    <script src="./babel.min.js"></script>
    <script src="../dist/wangEditor.js"></script>
    <script type="text/babel">
        const E = window.wangEditor

        const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
        // 创建 class
        class InsertABCMenu extends BtnMenu {
            constructor(editor) {
                const $elem = E.$(
                    `<div class="w-e-menu">
                        <button>ABC</button>
                    </div>`
                )
                super($elem, editor)
            }
            // 菜单点击事件
            clickHandler() {
                this.editor.cmd.do('insertHTML', 'ABC')
            }
            // 菜单激活状态
            tryChangeActive() {
                this.active() // 菜单激活
                // this.unActive() // 菜单不激活
            }
        }
        // 创建 class
        class InsertXYZMenu extends BtnMenu {
            constructor(editor) {
                const $elem = E.$(
                    `<div class="w-e-menu">
                        <button>XYZ</button>
                    </div>`
                )
                super($elem, editor)
            }
            // 菜单点击事件
            clickHandler() {
                this.editor.cmd.do('insertHTML', 'XYZ')
            }
            // 菜单激活状态
            tryChangeActive() {
                this.active() // 菜单激活
                // this.unActive() // 菜单不激活
            }
        }
        // 注册菜单 [全局模式注册菜单]
        E.registerMenu('insertABC', InsertABCMenu)
        
        //创建编辑器1 [实例模式注册菜单]
        const editor = new E('#div1')
        editor.menus.extend('insertXYZ', InsertXYZMenu)
        editor.config.menus.push('insertXYZ')
        editor.create()

        //创建编辑器2
        const editor2 = new E('#div2')
        editor2.create()

    </script>
</body>

</html>